<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <link rel="stylesheet" href="./common.css">
  <script>

    // 页面适配
    (function (win, doc, mode) {
      var std = 1920;
      var h = document.getElementsByTagName("head")[0];
      h.insertAdjacentHTML('beforeEnd', '<meta name="apple-mobile-web-app-capable" content="yes">');
      h.insertAdjacentHTML('beforeEnd', '<meta name="apple-mobile-web-app-status-bar-style" content="black">');
      h.insertAdjacentHTML('beforeEnd', '<meta name="format-detection" content="telephone=no">');
      h.insertAdjacentHTML('beforeEnd', '<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />');
      if (mode == 'px') {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
          function adaptVP(a) { function c() { var c, d; return b.uWidth = a.uWidth ? a.uWidth : 750, b.dWidth = a.dWidth ? a.dWidth : window.screen.width || window.screen.availWidth, b.ratio = window.devicePixelRatio ? window.devicePixelRatio : 1, b.userAgent = navigator.userAgent, b.bConsole = a.bConsole ? a.bConsole : !1, a.mode ? (b.mode = a.mode, void 0) : (c = b.userAgent.match(/Android/i), c && (b.mode = "android-2.2", d = b.userAgent.match(/Android\s(\d+.\d+)/i), d && (d = parseFloat(d[1])), 2.2 == d || 2.3 == d ? b.mode = "android-2.2" : 4.4 > d ? b.mode = "android-dpi" : d >= 4.4 && (b.mode = b.dWidth > b.uWidth ? "android-dpi" : "android-scale")), void 0) } function d() { var e, f, g, h, c = "", d = !1; switch (b.mode) { case "apple": f = (window.screen.availWidth * b.ratio / b.uWidth) / b.ratio; c = "width=" + b.uWidth + ",initial-scale=" + f + ",minimum-scale=" + f + ",maximum-scale=" + f + ",user-scalable=no"; break; case "android-2.2": a.dWidth || (b.dWidth = 2 == b.ratio ? 720 : 1.5 == b.ratio ? 480 : 1 == b.ratio ? 375 : .75 == b.ratio ? 240 : 480), e = window.screen.width || window.screen.availWidth, 375 == e ? b.dWidth = b.ratio * e : 750 > e && (b.dWidth = e), b.mode = "android-dpi", d = !0; case "android-dpi": f = 160 * b.uWidth / b.dWidth * b.ratio, c = "target-densitydpi=" + f + ", width=" + b.uWidth + ", user-scalable=no", d && (b.mode = "android-2.2"); break; case "android-scale": c = "width=" + b.uWidth + ", user-scalable=no" }g = document.querySelector("meta[name='viewport']") || document.createElement("meta"), g.name = "viewport", g.content = c, h = document.getElementsByTagName("head"), h.length > 0 && h[0].appendChild(g) } function e() { var a = ""; for (key in b) a += key + ": " + b[key] + "; "; alert(a) } if (a) { var b = { uWidth: 0, dWidth: 0, ratio: 1, mode: "apple", userAgent: null, bConsole: !1 }; c(), d(), b.bConsole && e() } }; adaptVP({ uWidth: 750 });
        }
        win.addEventListener('resize', setFont, false)
        setFont();
      }
      else if (mode == 'rem') {
        var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
          recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / std) + 'px';
          };
        if (!doc.addEventListener) return;
        recalc();
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
      }
    })(window, document, 'rem');


    // 下载游戏按钮
    function downGame() {
      var url = 'https://mlclient.giraffar.com/Download/GiraffeCrossGate_giraffe_0.3.0.2_411927032024.apk';
      Android.DownLoadGame(url);
      console.log(url);
      console.log('下载游戏按钮')
    }

    // 开始游戏按钮
    function startGame() {
      Android.StartGame()
      console.log('开始游戏按钮')
    }


    // 关闭弹窗按钮
    function closePage() {
      console.log('关闭弹窗')
    }

  </script>
  <style>
    .wrap {
      width: 100vw;
      height: 95vh;
      margin: auto;
      position: relative;
      display: flex;
    }

    .cont {
      background: url('./image/bg.png') no-repeat center center;
      background-size: 100% 100%;
      width: 16.29rem;
      height: 8.43rem;
      margin: auto;
      position: relative;
    }

    .down-game {
      background: url('./image/down-btn.png') no-repeat;
      background-size: 100% 100%;
      width: 3.38rem;
      height: 2.95rem;
      position: absolute;
      right: 1.9rem;
      top: 3.1rem;
    }

    .start-game {
      background: url('./image/start-game.png') no-repeat;
      background-size: 100% 100%;
      width: 3.01rem;
      height: 1.01rem;
      position: absolute;
      right: 2.14rem;
      top: 6.1rem;
    }
    .closePage{
      background: url('./image/close.png') no-repeat;
      background-size: 100% 100%;
      width: 0.72rem;
      height: 0.66rem;
      position: absolute;
      right: 1.7rem;
      top: .52rem;
    }
  </style>

</head>

<body>
  <div class="wrap">
    <div class="cont">
      <div class="down-game" onclick="downGame()"></div>
      <div class="start-game" onclick="startGame()"></div>
      <div class="closePage" onclick="closePage()"></div>
    </div>
  </div>
</body>

</html>